import React, { useState, useRef } from 'react';
import {
  ModalSheet,
  ModalSheetHeader,
  ModalSheetBody,
  // ModalSheetFooter, // 暂未使用
} from '../../components/common/ModalSheet';
import type {
  ModalSheetRef,
  SnapPoint,
} from '../../components/common/ModalSheet';
import './SnapPointsDemo.css';

const snapPoints: SnapPoint[] = [0, 100, 0.5, -100, 1];
const initialSnap = 1; // Initial snap point when sheet is opened

/**
 * Snap Points 专门演示页面
 */
export const SnapPointsDemo: React.FC = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [currentSnap, setCurrentSnap] = useState(initialSnap);
  const modalRef = useRef<ModalSheetRef>(null);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  const snapTo = (index: number) => {
    modalRef.current?.snapTo(index);
  };

  const handleSnapChange = (snapIndex: number, _snapValue: SnapPoint) => {
    setCurrentSnap(snapIndex);
  };

  return (
    <div className='snap-points-demo'>
      <div className='demo-header'>
        <button className='back-button' onClick={() => window.history.back()}>
          ← Back
        </button>
        <h1>Snap points</h1>
        <p>Sheet with snap points.</p>
      </div>

      <div className='demo-content'>
        <button className='open-button' onClick={openModal}>
          Open sheet
        </button>

        <div className='demo-description'>
          <h2>Example content to make the page scrollable...</h2>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae
            sint cupiditate eum quibusdam consequuntur quae! Rem error alias
            placeat aliquid qui facere dicta veniam tenetur suscipit? Quibusdam
            eos est similique excepturi officiis sequi maxime sunt blanditiis
            nulla aperiam rem cum totam eligendi eius voluptatem, dolores
            repellendus! Iste accusantium vero, sint ipsam dicta saepe
            laudantium blanditiis et corporis aliquid deleniti quae vitae
            nostrum, repellat illo explicabo accusamus odit pariatur ex.
          </p>
          <p>
            Quae corrupti veritatis voluptates molestiae ipsam beatae sit quia
            aperiam rem! Natus earum quas, quos rerum nisi nostrum deserunt
            voluptatibus perspiciatis? Hic, animi harum quam, fugit explicabo ab
            accusantium laborum iste rem omnis obcaecati quis earum eligendi in
            inventore, mollitia asperiores numquam amet architecto porro at!
          </p>
          <p>
            Aut praesentium, quia architecto ea natus dicta nihil laborum
            tempora animi quas voluptas recusandae adipisci nostrum vero amet,
            nisi temporibus fugit sequi beatae. Natus fugiat ullam nemo neque
            laborum nesciunt, iure totam aut doloribus ea!
          </p>
        </div>
      </div>

      {/* Modal Sheet with Snap Points */}
      <ModalSheet
        ref={modalRef}
        open={isOpen}
        onClose={closeModal}
        snapPoints={snapPoints}
        initialSnap={initialSnap}
        onSnap={handleSnapChange}
        position='bottom'
      >
        <ModalSheetHeader />
        <ModalSheetBody>
          <div className='sheet-content'>
            <div className='controls'>
              <button className='control-button' onClick={() => snapTo(4)}>
                Snap to top
              </button>
              <button className='control-button' onClick={() => snapTo(3)}>
                Snap to -100px from top
              </button>
              <button className='control-button' onClick={() => snapTo(2)}>
                Snap to 50%
              </button>
              <button className='control-button' onClick={() => snapTo(1)}>
                Snap to 100px
              </button>
              <button className='control-button' onClick={() => snapTo(0)}>
                Snap to 0 (close)
              </button>
            </div>

            <div className='snap-info'>
              <h3>🎯 Snap Points 演示</h3>
              <p>
                当前 Snap Point: <strong>{currentSnap}</strong>
              </p>
              <p>
                当前值: <strong>{snapPoints[currentSnap]}</strong>
              </p>
              <div className='instructions'>
                <h4>使用说明:</h4>
                <ul>
                  <li>拖拽顶部的拖拽条来调整高度</li>
                  <li>使用上方的按钮快速跳转到指定位置</li>
                  <li>松手时会自动吸附到最近的点</li>
                </ul>
              </div>
            </div>
          </div>
        </ModalSheetBody>
      </ModalSheet>
    </div>
  );
};

export default SnapPointsDemo;
